<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

// 文章详情页面：根据路由参数 :id 展示单篇文章

const route = useRoute()
const post = ref(null)

onMounted(() => {
  // 从 URL 中获取 id，例如 /posts/2 => id = 2
  const id = route.params.id
  // 模拟根据 id 获取文章详情（真实项目会请求后端接口）
  const map = {
    1: { id: 1, title: 'Vue 入门指南', content: '这里是入门内容……' },
    2: { id: 2, title: '组件化与模块化', content: '这里是组件化内容……' },
    3: { id: 3, title: '路由与导航', content: '这里是路由内容……' },
  }
  post.value = map[id] || { id, title: '未找到该文章', content: '请返回列表查看其他文章。' }
})
</script>

<template>
  <section class="page" v-if="post">
    <h2 class="title">{{ post.title }}</h2>
    <article class="content">{{ post.content }}</article>
    <router-link to="/posts" class="back">返回列表</router-link>
  </section>
</template>

<style scoped>
.page { padding: 24px; }
.title { font-size: 22px; margin: 0 12px 12px 0; }
.content { white-space: pre-wrap; line-height: 1.8; color: #333; margin-bottom: 16px; }
.back { color: #42b883; text-decoration: none; }
.back:hover { text-decoration: underline; }
</style>

<!--
学习笔记（b.3）：
- 目标：理解动态路由 /posts/:id 与 useRoute 的用法
- 核心概念：
  - 在路由表里写 { path: '/posts/:id', component: PostDetail }
  - 页面用 const route = useRoute() 获取当前路由对象
  - 访问 route.params.id 获取 URL 里的 id 值
- 练习建议：支持编辑与删除；如果本地文章不存在，显示“未找到该文章”
-->